<template>
	<view class="">
		<u-popup v-model="showSort" mode="bottom" border-radius="12" :height="popupHeight">
			<view class="sort_title">筛选</view>
			<view class="sort_box">
				<view class="areaScreen">
					<view class="">归属地：</view>
					<u-input
						v-model="city"
						placeholder="请选择归属地"
						placeholder-style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;"
						type="select"
						@click="handlePicker"
					></u-input>
				</view>
				<view class="sort_bottom">
					<view class="sort_bottom_left" @click="screenClick">筛选</view>
					<view class="sort_bottom_right" @click="resetClick">重置</view>
				</view>

				<u-picker v-model="isShowPicker" mode="region" :params="{ province: true }" @confirm="confirmPicker" style=""></u-picker>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showSort: false,
			isShowPicker: false,
			city: '',
			popupHeight: 400
		};
	},
	methods: {
		handlePicker() {
			this.popupHeight = 600;
			this.isShowPicker = true;
		},

		confirmPicker(e) {
			this.popupHeight = 400;
			this.city = e.province.label;
		},
		screenClick() {
			this.$emit('screenClick', this.city);
		},
		resetClick() {
			this.city = '';
			this.$emit('screenClick', this.city);
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.u-picker-body {
	height: 310rpx;
}
.sort_title {
	text-align: center;
	font-size: 33rpx;
	font-family: screen-font;
	padding: 30rpx;
}

.sort_box {
	padding: 0 100rpx;

	.areaScreen {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #ebebeb;
	}

	.sort_bottom {
		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;

		.sort_bottom_left {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			color: #fff;
			background-color: #132f6e;
		}

		.sort_bottom_right {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			color: #fff;
			background-color: #132f6e;
		}
	}
}
</style>
